<template>
  <div id="specSignHistory" class="history-container" style="display: flex;flex-direction: column;height: 100%;">
    <Breadcrumb content="申请单退费" />
    <div class="bodyContent">
      <vxe-toolbar perfect class-name="history-top-tool-box">
        <template #buttons>
          <vxe-form :data="form" title-align="right" title-colon>
            <vxe-form-item title="条码号">
              <template #default="{ data }">
                <vxe-input v-model="data.reqNo" clearable @clear="findSpecSamplingHistoryList()" style="width: 120px"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="病历号">
              <template #default="{ data }">
                <vxe-input v-model="data.hisReqId" clearable @clear="findSpecSamplingHistoryList()" style="width: 120px"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="姓名">
              <template #default="{ data }">
                <vxe-input v-model="data.patNa" clearable @clear="findSpecSamplingHistoryList()" style="width: 120px"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="标本状态">
              <template #default="{ data }">
                <vxe-select v-model="data.state" @change="findSpecSamplingHistoryList" style="width: 120px" clearable>
                  <vxe-option v-for="(item, index) in stateList" :key="index" :value="item.code" :label="item.nodeName"></vxe-option>
                </vxe-select>
              </template>
            </vxe-form-item>
            <vxe-form-item :title="searchTimeDesc">
              <template #default="{ data }">
                <vxe-input v-model="data.specSignDateS" type="datetime" clearable transfer @clear="findSpecSamplingHistoryList()" @change="findSpecSamplingHistoryList" style="width: 160px"></vxe-input>
                <span class="margin-lr-xs">-</span>
                <vxe-input v-model="data.specSignDateE" type="datetime" clearable transfer @clear="findSpecSamplingHistoryList()" @change="findSpecSamplingHistoryList" style="width: 160px"></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item>
              <template #default>
                <vxe-button class-name="margin-left-sm" icon="vxe-icon-search" type="text" class="button-blue" content="查询" @click="findSpecSamplingHistoryList"></vxe-button>
                <vxe-button icon="vxe-icon-undo" type="text" class="button-red" content="标本退回" @click="returnSpec" v-if="isBbth"></vxe-button>
              </template>
            </vxe-form-item>
          </vxe-form>
        </template>
      </vxe-toolbar>

      <div class="specSignHistoryTable history-center-table-box" :style="{ height: 'calc(100% - 40px - 32px)' }">
        <vxe-table ref="specSignHistoryTable" v-loading="loading" border align="left" height="auto" :menu-config="tableMenuTop" class="mytable-scrollbar" :data="specSignHistoryList" :row-config="{ isCurrent: true, isHover: true }" :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }" resizable show-overflow :cell-style="calcCellBgColor">
          <vxe-column type="seq" width="26"></vxe-column>
          <vxe-column field="patType" title="病人来源" width="60">
            <template #default="{ row }">
              {{ row.patType === '1' ? '门诊' : row.patType === '2' ? '急诊' : row.patType === '3' ? '住院' : row.patType === '4' ? '体检' : '未知' }}
            </template>
          </vxe-column>
          <vxe-column field="sampleTypeNa" title="样本类型" width="60"></vxe-column>
          <vxe-column field="reqNo" title="条码号" width="100px">
            <template #default="{ row }">
              <span>{{ row.reqNo ? row.reqNo : '' }}</span>
            </template>
          </vxe-column>

          <vxe-column field="dep" title="申请科室" width="80">
            <template #default="{ row }">
              <span>{{ row.reqDeptNa ? row.reqDeptNa : '' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="stateNa" title="标本状态" width="80px" align="center"></vxe-column>

          <!-- <vxe-column field="isOriginal" title="是否原始标本" width="100px" align="center">
          <template #default="{ row }">
            <span :class="row.spec.isOriginal ? 'text-blue' : 'text-red'">
              {{ row.spec.isOriginal ? '是' : '否' }}
            </span>
          </template>
        </vxe-column> -->
          <!-- <vxe-column field="date" title="传送方式" width="100"></vxe-column> -->
          <vxe-column field="patNo" title="病历号" width="100"></vxe-column>
          <vxe-column field="patNa" title="姓名" width="80"></vxe-column>
          <vxe-column field="sexNa" title="性别" width="60"></vxe-column>
          <vxe-column field="ageStr" title="年龄" width="80"></vxe-column>
          <vxe-column field="bedNo" title="床号" width="80"></vxe-column>
          <vxe-column field="reqPurpose" title="申请项目" width="180"></vxe-column>
          <vxe-column field="reqDoctorNa" title="申请人" width="80">
            <template #default="{ row }">
              <span>{{ row.reqDoctorNa ? row.reqDoctorNa : '' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="reqTime" title="申请时间" width="120">
            <template #default="{ row }">
              <span>{{ row.reqTime ? row.reqTime : '' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="isSign" title="费用状态" width="80px" align="center">
            <template #default="{ row }">
              <span v-if="row.isCancel==1" style="color:red;">
                已退费
              </span>
              <span v-else style="color:blue;">
                已计费
              </span>
            </template>
          </vxe-column>
          <vxe-column field="cancelDoctorNa" title="退费人" width="80">
          </vxe-column>
          <vxe-column field="cancelTime" title="退费时间" width="120">
            <template #default="{ row }">
              <span>{{ row.cancelTime ? row.cancelTime : '' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="cancelReason" title="退费原因" show-overflow-tooltip>
          </vxe-column>
          <vxe-column title="操作" align="center" width="80">
            <template #default="{ row }">
              <vxe-button type="text" status="primary" v-if="row.isCancel!=1" circle @click="handleReturnFee(row)">退费</vxe-button>
              <!-- <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click="handleDelete(row)"> </vxe-button> -->
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="history-bottom-pagesize-box">
        <vxe-pager align="left" min-height="32px" :current-page="page.currentPage" :page-size="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handleSizeChange($event)"></vxe-pager>
      </div>
    </div>
    <vxe-modal v-model="returnFeeModal" width="45vw" show-footer :mask="false" destroy-on-close>
      <vxe-textarea v-model="currentSpecSignHistory.cancelReason" placeholder="退费原因" :autosize="{ minRows: 6, maxRows: 16 }"></vxe-textarea>
      <template #footer>
        <el-button type="primary" @click="confirmReturnFee" :loading="returnFeeLoading">确 定</el-button>
        <el-button @click="closeModal">取 消</el-button>
      </template>
    </vxe-modal>
  </div>
</template>
<script lang="ts" setup>
// 引入组件区 ==========
import { onMounted, ref, reactive, getCurrentInstance } from 'vue';
import { VXETable } from 'vxe-table';
import { AppStore } from '../../../stores/store';
import { IsEmpty, formatDateTime } from '@/utils/common';
import XEClipboard from 'xe-clipboard';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import Breadcrumb from '@/components/Breadcrumb.vue';

// 方法定义区 =============
onMounted(() => {
  findSpecSamplingHistoryList();
});
defineExpose({ initPage });

// 全局变量定义区 ==========
let tableMenuTop = {
  className: 'my-menus',
  body: {
    options: [
      [
        {
          code: 'copy',
          name: '复制内容',
          prefixIcon: 'vxe-icon-copy',
          className: 'my-copy-item',
          visible: false
        }
      ]
    ]
  },
  visibleMethod: ({ options, column }) => {
    const isVisible = column && column.field === 'specCode';
    options.forEach((list) => {
      list.forEach((item) => {
        if (column) {
          if (item.code === 'copy') {
            item.visible = isVisible;
          }
        } else {
          item.visible = false;
        }
      });
    });
    return true;
  }
};
let pageIndex = 1;
let totalCount = 0;
let loading = ref(false);
let specSignHistoryList = reactive([]); //列表
//let currentSpecSignHistory = {} as any; //当前选中行
let currentRowIndex = 0;
let { proxy }: any = getCurrentInstance();
let stateList = reactive([
  { nodeName: '全部', code: '' },
  { nodeName: '已计费', code: '0' },
  { nodeName: '已退费', code: '1' }
]);
let returnReason = '';
let form = reactive({
  patId: '', //病历号
  reqNo: '',
  patNa: '',
  state: '',
  isSign: null,
  isSampling: null,
  specSignDateS: formatDateTime(new Date(), 'yyyy-MM-dd 00:00:00'),
  specSignDateE: formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59')
});
let code = ref('');
let returnFeeModal = ref(false);
let searchTimeDesc = ref('申请时间');
let returnFeeLoading = ref(false);
function initPage(refData: any) {
  if (refData !== null) {
    code = refData.code;
  }
}
let unqualifiedDetailIds = reactive({});

//获取列表
function findSpecSamplingHistoryList() {
  //根据不同的状态查询不同的数据
  //code.value = 70  查询已签收的数据
  specSignHistoryList.length = 0;

  loading.value = true;
  const url = '/lab/reqMain/findLabReqMainReturnFeePage';
  const data: any = {
    state: form.state,
    isSign: form.isSign,
    isSampling: form.isSampling,
    pageIndex: page.currentPage,
    pageSize: page.pageSize,
    patId: !IsEmpty(form.patId) ? form.patId : null,
    reqNo: !IsEmpty(form.reqNo) ? form.reqNo : null,
    patNa: !IsEmpty(form.patNa) ? form.patNa : null
  };

  data.reqTimeS = !IsEmpty(form.specSignDateS) ? form.specSignDateS : null;
  data.reqTimeE = !IsEmpty(form.specSignDateE) ? form.specSignDateE : null;

  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      specSignHistoryList.push(...res.data.records);
      page.totalResult = res.data.total;
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      proxy.$alert(err, '提示');
    });
}
let currentSpecSignHistory = reactive({
  id: '',
  reqNo: '',
  hisReqId: '',
  patId: '',
  patNa: '',
  sex: '',
  isSign: '',
  feeName: '',
  cancelReason: ''
}); //当前采集记录详情

let currentRow = reactive({});
let title = ref('');
// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
//点击每页数量
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type == 'size') {
    page.pageSize = pageSize;
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  findSpecSamplingHistoryList();
}

//下拉选择列表
function pulldownSelectConfirm(e) {
  e.aimKeys.forEach((item) => {
    form[item.targetField] = e.row[item.sourceField];
  });
  findSpecSamplingHistoryList();
}

function calcCellBgColor({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
  return { color: row.displayColor };
}
function handleReturnFee(row) {
  returnFeeModal.value = true;
  currentSpecSignHistory.reqNo = row.reqNo;
}
function closeModal() {
  currentSpecSignHistory.cancelReason = '';
  returnFeeModal.value = false;
}
function confirmReturnFee() {
  returnFeeLoading.value = true;
  const url = '/lab/reqMain/returnLabFeeByReqNo';
  proxy.$http
    .post(url, currentSpecSignHistory)
    .then((res: any) => {
      returnFeeModal.value = false;
      findSpecSamplingHistoryList();
      currentSpecSignHistory.cancelReason = '';
      returnFeeLoading.value = false;
    })
    .catch((err: any) => {
      returnFeeLoading.value = false;
      VxeMessage('退费异常', VxeNotifyType.error);
    });
}
</script>
<style lang="scss" scoped>
#specSignHistory {
  height: 100%;

  .bodyContent {
    height: calc(100% - 20px);

    .area {
      background-color: $base-white;

      .Splitpanes-Panel {
        height: calc(100vh - 75px);
      }

      .lab-maininfo-right-tab {
        height: 100%;

        :deep(.el-tabs__nav-prev) {
          line-height: 28px !important;
        }

        :deep(.el-tabs__nav-next) {
          line-height: 28px !important;
        }

        :deep(.el-tabs__content) {
          height: calc(100% - 30px);
          padding: 2px;
        }

        :deep(.el-tab-pane) {
          height: 100%;
        }
      }
    }
  }
}

:deep(.el-tabs__new-tab) {
  margin: unset;
  width: unset;
  border: unset;
  margin-top: 3px;
}

:deep(.el-tabs--card > .el-tabs__header) {
  height: unset;
}

:deep(.el-tabs__header) {
  margin: unset;
}
</style>

